<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11伪元素before-after</title>
    <style>
        .before {
            color: red;
        }

        .after {
            color: green;
        }

        .item::before {
            content: "321";
            color: greenyellow;
            font-size: 20px;
        }

        .item::after {
            /* content: "cba"; */
            content: url(https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/hotboard_hot.428fe145.svg);
            color: orange;
            font-size: 20px;
            /* 定位调整位置 */
            position: relative;
            top: 2px;
            left: 5px;

        }

        /* 
            伪元素是一个 行内元素 ：
                宽高是由内容撑开的，不能设置宽高

            可以使用 svg 来设置字体图标(也是字体) font-size 来改变大小
        */
        .item-party::after {
            content: "1111111";
            /* 设置背景图是没有办法来设置背景图的大小的 */
            /* background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/participant.png); */
            width: 38px;
            height: 16px;
            position: relative;
            left: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="before">123</span>
        <!-- 要在内容后添加内容 -->
        我是div元素
        <!-- 通过 span 来添加 -->
        <span class="after">abc</span>
    </div>
    <div class="box2">
        <span class="before">123</span>
        <!-- 要在内容后添加内容 -->
        我是box2
        <!-- 通过 span 来添加,每加一个就要重复加一下 -->
        <span class="after">abc</span>
    </div>

    <!-- 伪元素的方案 -->
    <div class="box3 item">我是box3</div>
    <div class="box4 item">我是box4</div>
    <div class="box5 item-party">我是box5</div>

    <!-- 伪元素的补充 -->
    <div class="box5">我是box5</div>

</body>

</html>